<div class="group main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <div [innerHTML]="'DEMO.BUTTON.DESCRIPTION' | translate"></div>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol directive"></span></h3>
      <div class="free-demo-row">
        <h3 class="free-title">free-button-group</h3>
        <p>{{'DEMO.BUTTON.BUTTONGROUPDESC' | translate}}</p>
      </div>
      <div class="free-demo-row">
        <h3 class="free-title">fButton</h3>
        <p>{{'DEMO.BUTTON.BUTTONDESC' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>
          <free-table-body>
            <free-table-row>
              <free-table-cell>size</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.BUTTON.SIZE' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>theme</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
               <ng-template> {{'DEMO.BUTTON.THEME' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>disabled</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.BUTTON.DISABLED' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>icon</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  <span [innerHTML]="'DEMO.BUTTON.ICON' | translate"></span>
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>block</free-table-cell>
              <free-table-cell>
                <ng-template><code>-</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.BUTTON.BLOCK' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>round</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.BUTTON.ROUND' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;ButtonModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab header="Demo">
            <a fButton>Link</a>
            <button fButton>Button</button>
          </free-tab>
          <free-tab header="Code">
            <free-code lang="html">
              &lt;a fButton&gt;default&lt;/a&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">round</h3>
        <free-tab-group direction="right">
          <free-tab header="Demo">
            <button fButton [round]="true">Round Button</button>
          </free-tab>
          <free-tab header="Code">
            <free-code lang="html">
              &lt;a fButton&gt;default&lt;/a&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">theme</h3>
        <free-tab-group direction="right">
          <free-tab header="Demo">
            <button fButton>default</button>
            <button fButton theme="primary">primary</button>
            <button fButton theme="info">info</button>
            <button fButton theme="success">success</button>
            <button fButton theme="warning">warning</button>
            <button fButton theme="danger">danger</button>
          </free-tab>
          <free-tab header="Code">
            <free-code lang="html">
              &lt;button fButton&gt;default&lt;/button&gt;
              &lt;button fButton theme="primary"&gt;primary&lt;/button&gt;
              &lt;button fButton theme="info"&gt;info&lt;/button&gt;
              &lt;button fButton theme="success"&gt;success&lt;/button&gt;
              &lt;button fButton theme="warning"&gt;warning&lt;/button&gt;
              &lt;button fButton theme="danger"&gt;danger&lt;/button&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Size</h3>
        <free-tab-group direction="right">
          <free-tab header="Demo">
            <button fButton theme="danger" size="big">danger</button>
            <button fButton theme="danger">danger</button>
            <button fButton theme="danger" size="small">danger</button>
            <button fButton theme="danger" size="mini">danger</button>
          </free-tab>
          <free-tab header="Code">
            <free-code lang="html">
              &lt;button fButton theme="danger" size="big"&gt;danger&lt;/button&gt;
              &lt;button fButton theme="danger"&gt;danger&lt;/button&gt;
              &lt;button fButton theme="danger" size="small"&gt;danger&lt;/button&gt;
              &lt;button fButton theme="danger" size="mini"&gt;danger&lt;/button&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">GROUP</h3>
        <free-tab-group direction="right">
          <free-tab header="Demo">
            <free-button-group>
              <button fButton>default</button>
              <button fButton>default</button>
              <button fButton>default</button>
            </free-button-group>
            <free-button-group>
              <button fButton theme="danger">danger</button>
              <button fButton theme="danger">danger</button>
              <button fButton theme="danger">danger</button>
            </free-button-group>
            <free-button-group>
              <button fButton theme="primary">primary</button>
              <button fButton theme="primary">primary</button>
              <button fButton theme="primary">primary</button>
            </free-button-group>
            <free-button-group>
              <button fButton theme="info">info</button>
              <button fButton theme="info">info</button>
              <button fButton theme="info">info</button>
            </free-button-group>
            <free-button-group>
              <button fButton theme="success">success</button>
              <button fButton theme="success">success</button>
              <button fButton theme="success">success</button>
            </free-button-group>
          </free-tab>
          <free-tab header="Code">
            <free-code lang="html">
              &lt;free-button-group&gt;
                &lt;button fButton&gt;default&lt;/button&gt;
                &lt;button fButton&gt;default&lt;/button&gt;
                &lt;button fButton&gt;default&lt;/button&gt;
              &lt;/free-button-group&gt;
              &lt;free-button-group&gt;
                &lt;button fButton theme="danger"&gt;danger&lt;/button&gt;
                &lt;button fButton theme="danger"&gt;danger&lt;/button&gt;
                &lt;button fButton theme="danger"&gt;danger&lt;/button&gt;
              &lt;/free-button-group&gt;
              &lt;free-button-group&gt;
                &lt;button fButton theme="primary"&gt;primary&lt;/button&gt;
                &lt;button fButton theme="primary"&gt;primary&lt;/button&gt;
                &lt;button fButton theme="primary"&gt;primary&lt;/button&gt;
              &lt;/free-button-group&gt;
              &lt;free-button-group&gt;
                &lt;button fButton theme="info"&gt;info&lt;/button&gt;
                &lt;button fButton theme="info"&gt;info&lt;/button&gt;
                &lt;button fButton theme="info"&gt;info&lt;/button&gt;
              &lt;/free-button-group&gt;
              &lt;free-button-group&gt;
                &lt;button fButton theme="success"&gt;success&lt;/button&gt;
                &lt;button fButton theme="success"&gt;success&lt;/button&gt;
                &lt;button fButton theme="success"&gt;success&lt;/button&gt;
              &lt;/free-button-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
      <h3 class="free-toolbar">ICON</h3>
      <free-tab-group direction="right">
        <free-tab header="Demo">
          <button fButton icon="home">HOME</button>
          <button fButton icon="user"></button>
          <button fButton circle="true" icon="user"></button>
        </free-tab>
        <free-tab header="Code">
          <free-code lang="html">
            &lt;button fButton icon="home"&gt;HOME&lt;/button&gt;
            &lt;button fButton icon="user"&gt;&lt;/button&gt;
            &lt;button fButton circle="true" icon="user"&gt;&lt;/button&gt;
          </free-code>
        </free-tab>
      </free-tab-group>
    </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Disabled</h3>
        <free-tab-group direction="right">
          <free-tab header="Demo">
            <button fButton theme="success" icon="user" [disabled]="true">success</button>
          </free-tab>
          <free-tab header="Code">
            <free-code lang="html">
              &lt;button fButton theme="success" icon="user" [disabled]="true"&gt;success&lt;/button&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">BLOCK</h3>
        <free-tab-group direction="right">
          <free-tab header="Demo">
            <button fButton block>default</button>
            <button fButton block theme="danger">danger</button>
          </free-tab>
          <free-tab header="Code">
            <free-code lang="html">
              &lt;button fButton block&gt;default&lt;/button&gt;
              &lt;button fButton block theme="danger"&gt;danger&lt;/button&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Flat Buttons</h3>
        <free-tab-group direction="right">
          <free-tab header="Demo">
            <button fButton [flat]="true">Default</button>
            <button fButton [theme]="'primary'" [flat]="true">Primary</button>
            <button fButton [theme]="'info'" [flat]="true">Info</button>
            <button fButton [theme]="'warning'" [flat]="true">Warning</button>
            <button fButton [theme]="'success'" [flat]="true">Success</button>
            <button fButton [theme]="'danger'" [flat]="true">Danger</button>
          </free-tab>
          <free-tab header="Code">
            <free-code lang="html">
              &lt;free-button-group&gt;
              &lt;button fButton&gt;default&lt;/button&gt;
              &lt;button fButton&gt;default&lt;/button&gt;
              &lt;button fButton&gt;default&lt;/button&gt;
              &lt;/free-button-group&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>

  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
